import Vue from 'vue'
import VueRouter from 'vue-router'
import LoginView from "@/components/LoginView";
import RegisterView from "@/components/RegisterView";
import StudentView from "@/components/StudentView";

Vue.use(VueRouter)

//  如何实现根据用户访问资源路径不同 加载不同的组件
//  /login    -> LoginView
//  /register ->RegisterView
//  /student  -> StudentView

//  设置路由列表
const routes = [
    {
        path:'/',
        redirect: '/login'   // 路由的重定向   /  ->  /login
    },
    {
        path:'/login',
        component: LoginView
    },
    {
        path:'/register',
        component: RegisterView
    },
    {
        path:'/student',
        component: StudentView
    }
]



// 创建路由对象  将路由列表作为参数设置在路由对象中
let router = new VueRouter({
    routes
});

// 添加路由守卫 实现非法请求的拦截处理  to  到哪里去  from  从哪里来   next 是否允许去      /register  --next---->    /login
router.beforeEach((to, from, next) => {
    // 1.获取目标路由
    let path = to.path;

    // 2. 判定用户路由   /login  /register
     if (path=="/login" || path=="/register"){
         // 放行
         next();
         return
     }
     // 3. 访问受限资源： 必须经过认证通过的用户才能访问的资源    /student
     let username = sessionStorage.getItem("username");
     if (username){  //  用户已经认证
         next();
         return;
     }
     // 4. 用户访问的是受限资源  并且没有认证 将路由跳转到登录页
      next("/login")

})

export  default  router
